<html>
	<head>
		<title> 使用DOM动态添加文档内容 </title>
		<style type="text/css">
			div#imgArear {
			    width: 400px;
				height: 400px;
				border: 1px solid;
			}
		</style>

		<script type="text/javascript">
			function addImg() {
	
				//1. 获得图片区域的div节点
				var div = document.getElementById('imgArear');

				//2. 修改div节点的innerHTML属性
				div.innerHTML = "<img src='images/1.jpg' width='300px' height='300px' />";

				
				
			} //addImg()

			function addText() {

				//1. 获得图片区域的div节点
				var div = document.getElementById('imgArear');

				//2. 修改div节点的innerHTML属性
				div.innerHTML += "<br />这是一条金鱼";

			} //addText()

			function changeImg() {

				//1. 获得图片区域的div节点
				var div = document.getElementById('imgArear');

				//2. 修改div节点的innerHTML属性
				div.innerHTML = "<img src='images/2.jpg' width='300px' height='300px' />";
				div.innerHTML += "<br />这是一片草原";
			  
			}
		</script>
	</head>

	<body>
		<form>
			<input type="button" value="添加金鱼图片" onclick="addImg();" />
			<input type="button" value="添加图片的文字说明" onclick="addText();" />
			<input type="button" value="替换为草原图片" onclick="changeImg();" />
		</form>

		<div id="imgArear">
		初始化的一些内容<a href="www.baidu.com">asdfsd</a>
		</div>		
	</body>
</html>